<template>
  <div id="app">
    <div class="review-page">
      <el-container>
        <el-container>
          <el-header class="header">
            <h2>我的评价</h2>
          </el-header>
          <el-main class="content">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card>
                  <div slot="header" class="card-header">
                    <span>个人信息</span>
                  </div>
                  <el-descriptions :column="1">
                    <el-descriptions-item label="用户名">{{user.account}}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{user.phone}}</el-descriptions-item>
                    <el-descriptions-item label="邮箱地址">{{user.email}}</el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card>
                  <div slot="header" class="card-header">
                    <span>买家信誉评分</span>
                  </div>
                  <el-descriptions :column="1">
                    <el-descriptions-item label="买家积分">{{ user.integral }} 分</el-descriptions-item>
                    <el-descriptions-item label="买家话费">{{ user.phoneBill }} 元</el-descriptions-item>
                    <el-descriptions-item label="您的积分情况">
                      <el-tag
                        :type="getScoreTag(user.integral)"
                      >{{ getScoreMessage(user.integral) }}</el-tag>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="来自卖家的评价" name="fromSeller"></el-tab-pane>
              <el-tab-pane label="给他人的评价" name="toOthers"></el-tab-pane>
            </el-tabs>
            <el-table :data="reviews" border style="width: 100%" v-if="activeTab === 'fromSeller'">
              <el-table-column prop="type" label="评价" width="180">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.commentType === '好评'" type="success">好评</el-tag>
                  <el-tag v-else-if="scope.row.commentType === '中评'" type="warning">中评</el-tag>
                  <el-tag v-else type="danger">差评</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="returnRemark" label="评论内容"></el-table-column>
              <el-table-column prop="returnTime" label="日期" width="200">
                <template slot-scope="scope">{{ formatDate(scope.row.returnTime) }}</template>
              </el-table-column>
              <el-table-column prop="returnAccount" label="评价人" width="120"></el-table-column>
              <el-table-column prop="skuDescribe" label="宝贝信息"></el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click="deleteShopComment(scope.row)"
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              :data="reviews"
              border
              style="width: 100%"
              v-else-if="activeTab === 'toOthers'"
            >
              <el-table-column prop="type" label="评价" width="180">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.commentType === '好评'" type="success">好评</el-tag>
                  <el-tag v-else-if="scope.row.commentType === '中评'" type="warning">中评</el-tag>
                  <el-tag v-else type="danger">差评</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="评论内容"></el-table-column>
              <el-table-column prop="createTime" label="日期" width="200">
                <template slot-scope="scope">{{ formatDate(scope.row.createTime) }}</template>
              </el-table-column>
              <el-table-column prop="userAccount" label="评价人" width="120"></el-table-column>
              <el-table-column prop="skuDescribe" label="宝贝信息"></el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click="deleteMyComment(scope.row)"
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
  <script>
export default {
  name: "ReviewPage",
  data() {
    return {
      activeTab: "fromSeller",
      reviews: [],
      user: {},
      phone: ""
    };
  },
  watch: {
    activeTab(newVal) {
      if (newVal === "fromSeller") {
        this.queryUser(); // 加载来自卖家的评价数据
      } else if (newVal === "toOthers") {
        this.queryOtherReviews(); // 加载给他人的评价数据
      }
    }
  },
  methods: {
    async queryOtherReviews() {
      let userId = this.user.id;
      let response = await this.$axios.get(
        "/api/productOrder/queryCommentByUserId/" + userId
      );
      if (response.data.code === 200) {
        this.reviews = response.data.data;
      }
    },
    formatDate(dateString) {
      const dateObject = new Date(dateString);
      const options = {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
      };
      return dateObject.toLocaleDateString(undefined, options);
    },
    deleteMyComment(row) {
      let comment = {}
      comment.id = row.id;
      comment.skuId = row.skuId;
      comment.orderId = row.orderId;
      comment.returnId = row.returnId
      this.$axios
            .post("/api/productOrder/deleteMyComment" , comment)
            .then(res => {
              if (res.data.code === 200) {
                this.queryUser();
                this.$message.success("评论已删除")
              }
            });
    },
    deleteShopComment(row) {
      this.$axios
            .get("/api/productOrder/deleteShopComment/" + row.returnId)
            .then(res => {
              if (res.data.code === 200) {
                this.queryUser();
                this.$message.success("评论已删除")
              }
            });
    },
    queryUser() {
      let param = new URLSearchParams();
      param.append("phone", this.phone);
      this.$axios.post("/api/zgyd-user/queryUser", param).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.data;

          let userId = this.user.id;
          this.$axios
            .get("/api/productOrder/queryCommentByUserId/" + userId)
            .then(res => {
              if (res.data.code === 200) {
                this.reviews = res.data.data.filter(review => review.status != 0 && review.returnAccount != null);
                console.log('过滤后的评论：', this.reviews);
              }
            });
        }
      });
    },
    getScoreTag(score) {
      if (score > 5000) {
        return "success";
      } else if (score > 1000) {
        return "warning"; // 黄色的标签对应 'warning'
      } else {
        return "danger"; // 红色的标签对应 'danger'
      }
    },
    getScoreMessage(score) {
      if (score > 5000) {
        return "积分充足";
      } else if (score > 1000) {
        return "积分良好";
      } else {
        return "积分不足";
      }
    }
  },
  created() {
    this.phone = localStorage.getItem("username");
    this.queryUser();
  }
};
</script>
  
  <style scoped>
.review-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sidebar {
  background-color: #f5f5f5;
}

.header {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.content {
  padding: 20px;
}

.el-menu-vertical-demo {
  width: 200px;
}

.el-table .el-button {
  margin: 0;
}

.el-tag {
  margin: 0;
}
</style>
  